<template>
  <div class="homePage">
    <div class="mainContent">
      <!-- <div>
        <div class="block">
          <el-carousel trigger="click" height="335px">
            <el-carousel-item>
              <div class="imgWrap">
                <img src="http://img3.epanshi.com/14472/upload/top/sy-banner-08.jpg" alt="">
              </div>
            </el-carousel-item>

          </el-carousel>
        </div>
      </div> -->
      <div class="contentWrap">
        <div class="summarize">
          <div>
            <!-- <span>FOCUS</span><br> -->
            热点聚焦
          </div>
          <span>目前台京在台州地区为多家中小型企业提供知识产权服务，能为客户提供最专业最全面的服务，因为专业所以值得选择</span>
        </div>
        <div class="content">
          <div class="contentLeft">
            <el-carousel type="card" indicator-position="none" :interval="2000" height="300px">
              <el-carousel-item>
                <img src="../assets/imgs/banner3.jpg" alt="">
              </el-carousel-item>
              <el-carousel-item>
                <img src="../assets/imgs/banner4.jpg" alt="">
              </el-carousel-item>
              <el-carousel-item>
                <img src="../assets/imgs/banner5.jpg" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="contentRight">
            <ul>
              <li v-for="item in list" :key="item.id" @click="findDetail(item.id)">
                <span class="img"><img src="../assets/imgs/right.png" alt=""></span>
                <span>{{item.bt}}</span>
                <span class="floatRight">{{filterTime(item.time)}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment"
export default {
  name: 'HomePage',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getArtical()
  },
  methods: {
    findDetail (id) {
      const newRoute = this.$router.resolve({path: '/detail', query: {id: id, type: 1}})
      window.open(newRoute.href,'_self')
    },
    getArtical () {
      this.$http({
        method: 'post',
        url: this.api.POST_ARTICAL_LIST + '?pageSize=7&pageNum=1',
        data: {
          // pageSize: '1',
          // pageNum: '8'
        }
      }).then(res => {
        console.log(res)
        this.list = res.data.data
      })
    },
    filterTime (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.pageSize {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.contentWrap {
  width: 1100px;
  margin: 80px auto;
}
.contentWrap .summarize {
  width: 100%;
  /* height: 25px; */
  padding: 30px 150px 10px;
  font: normal 14px/28px '微软雅黑';
  color: #c9c5c5;
  text-align: center;
  border-top:1px solid #c9c5c5;
  position: relative;
  box-sizing: border-box;
}

.summarize div{
  font: normal 22px/50px '微软雅黑';
  color: #333;
  background: white;
  text-align: center;
  position: absolute;
  width: 210px;
  left: 50%;
  border-left: 1px solid #c9c5c5;
  border-right: 1px solid #c9c5c5;
  margin-left: -105px;
  top: -30px;
}
/* .contentWrap .summarize div span{
  font: normal 14px/20px '微软雅黑';
} */
.content {
  width: 1100px;
  height: 300px;
  /* background: red; */
  margin: 10px auto;
  position: relative;
}
.content .contentLeft{
  width: 48%;
  height: 100%;
  position: absolute;
  left: 0px;
  top:0px;
}
.content .contentRight{
  width: 48%;
  height: 100%;
  position: absolute;
  right: 0px;
  top:0px;
}
.content .contentRight ul li {
  /* height: 35px; */
  line-height: 30px;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
  padding: 0px 137px 0px 20px;
  position: relative;
}
.content .contentRight ul li span {
  padding: 0px 5px;
}
.content .contentRight ul li span.floatRight{
  float: right;
  color: #999;
  position: absolute;
  right:0px;
  top: 0px;
}
.content .contentRight ul li .img{
  position: absolute;
  left: 0px;
  top:0px;
}
.content .contentRight ul li img {
  width: 10px;
  height: 8px;
}
.content .contentLeft img{
  width: 100%;
  height: 100%;
}
</style>
